/**
 * params formArr 类型：数组，包含所有表单，值为包含表单控件信息的对象
 *  formArr = [
 *   {
 *    labelVal: 'label的值'，
 *    labelText: 'label的文本内容'，
 *    type: 'antd表单组件的类型'，可选 'Select' 或 'Input'
 *    placeholder: 'Input' 组件的 placehodel属性的值
 *    initialValue: '表单控件的默认值'
 *    children: []  'Select'组件子选项的值
 *   }
 * ]
 */

/**
* params setSearchFromVal 
* 类型: setState函数，可以接收到包含所有表单控件值的对象
*/

/**
* params bln 可传，传入true时，初始化后默认获取一次form表单数据
* 类型: Boolean
*/
import React from 'react'
// import { connect } from 'react-redux'
import { Form, Row, Col, Input, Button, Icon, Select } from 'antd'
import './SearchFrom.css'
const { Option } = Select

// 默认表单
const initFormArr = [
  {
    labelVal: 'companyName ',
    labelText: '单位名称',
    type: 'Select',
    initialValue: '全部',
    children: ['盐田支公司', '龙岗支公司', '布吉支公司', '龙华支公司', '福田支公司', '罗湖支公司', '宝安支公司', '新洲支公司', '信息技术部', '客户服务部', '办公室', '出单中心', '车辆保险部', '全部']
  },
  {
    labelVal: 'year',
    labelText: '年度',
    type: 'Select',
    initialValue: 2019,
    children: [2019, 2020, '全部']
  },
  {
    labelVal: 'month',
    labelText: '月份',
    type: 'Select',
    initialValue: 5,
    children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, '全部']
  },
  {
    labelVal: 'issueNumber',
    labelText: '发放次数',
    type: 'Input',
    initialValue: 1
  },
]

// 根据类型渲染表单控件
class Item extends React.PureComponent {
  render () {
    const { type, children, ...reset } = this.props
    if (type === 'Input') {
      return <Input type="text" {...reset} />
    } else if (type === 'Select') {
      return (
        <Select
          {...reset}
          optionFilterProp="children"
          showSearch={children.length >= 10}
          filterOption={(input, option) =>
            option.props.children.toLowerCase().includes(input.toLowerCase())
          }
        >
          {children.map(item => <Option key={item}>{item + ''}</Option>)}
        </Select>
      )
    }
  }
}

class SearchForm extends React.PureComponent {
  state = {
    expand: false,
    count: 8
  };
  formArr = this.props.formArr || initFormArr

  getFields () {
    const count = this.state.expand ? this.formArr.length : this.state.count
    const { getFieldDecorator } = this.props.form
    const children = this.formArr.map(({ labelVal, labelText, initialValue, ...reset }, i) => {
      return (
        <Col
          {...{ xm: 24, md: 12, lg: 8, xl: 6 }}
          key={i}
          style={{ display: i < count ? 'block' : 'none' }}>
          <Form.Item
            label={labelText}>
            {
              getFieldDecorator(labelVal, {
                reles: [{ required: false }],
                initialValue
              })(<Item {...reset} />)
            }
          </Form.Item>
        </Col>
      )
    })
    return children
  }

  handleSearch = e => {
    e && e.preventDefault()
    this.props.form.validateFields(
      (err, values) => {
        err && console.log(err)
        let obj = {}
        for (let key in values) {
          (values[key] !== '全部' && values[key]) && (obj[key] = values[key])
        }
        this.props.setSearchFromVal(obj)
      }
    )
  }

  handleReset = () => {
    this.props.form.resetFields()
  }

  toggle = () => {
    const { expand } = this.state
    this.setState({ expand: !expand })
  }
  componentDidMount () {
    this.props.bln && this.handleSearch()
  }
  render () {
    return (
      <Form className='search-from' onSubmit={this.handleSearch}>
        <Row gutter={24} >
          {this.getFields()}
        </Row>
        <Row>
          <Col>
            <Button ref="submit" type="primary" htmlType="submit">
              查询
            </Button>
            <Button type="danger" style={{ marginLeft: 8 }} onClick={this.handleReset}>
              清除
            </Button>
            <span
              style={{ marginLeft: 8, fontSize: 12, display: this.formArr.length < this.state.count && 'none' }}
              onClick={this.toggle}>
              {this.state.expand ? '收起' : '展开'}
              <Icon type={this.state.expand ? 'up' : 'down'} />
            </span>
          </Col>
        </Row>
      </Form>
    )
  }
}



export default Form.create()(SearchForm)
